<template>
  <div class="Dingdan">
    <!-- 头部区域 -->
    <div class="top">
      <el-input
        placeholder="请输入货物名称"
        prefix-icon="el-icon-search"
        v-model="input2"
        @input="myCheck()"
      >
      </el-input>
      <el-button type="primary" icon="el-icon-search" @click="Click()"
        >搜索</el-button
      >
    </div>

    <!-- 查看-->
    <el-dialog title="订单信息" :visible.sync="dialogFormVisible2">
      <el-form :model="table" ref="userForm2">
        <el-form-item label="订单编号" label-width="100px">
          <el-input v-model="table._id" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="订单名称" label-width="100px">
          <el-input v-model="table.name" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="订单种类" label-width="100px">
          <el-input v-model="table.class" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="订单价格" label-width="100px">
          <el-input v-model="table.price" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="订单数量" label-width="100px">
          <el-input v-model="table.num" readonly="readonly"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 主订单数据 -->
    <div class="down">
      <el-table :data="tableDate" height="570" border style="width: 100%">
        <el-table-column
          prop="_id"
          label="订单编号"
          width="220"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="订单名称"
          width="220"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="class"
          label="货物种类"
          width="220"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="price"
          label="单价（元）"
          width="220"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="num"
          label="数量（千克，个）"
          width="220"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="xinxi"
          label="具体信息"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              plain
              @click="handleEdit(scope.$index, scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
    
    <script>
export default {
  data () {
    return {
      dialogFormVisible: false,
      dialogFormVisible2: false,
      Userform: {
        _id: '',
        name: '',
        class: '',
        price: '',
        num: ''
      },
      input2: '',
      tableDate: [],
      table: {},
      oldData: ''
    }
  },
  created () {
    this.myDingdan()
  },
  methods: {
    // 请求订单数据
    myDingdan () {
      const item = JSON.parse(sessionStorage.getItem('user'))
      const that = this
      this.$http({
        method: 'POST',
        url: '/lk/lk/finish',
        data: {
          person: item.username
        }
      }).then(function (response) {
        that.tableDate = response.data.data
        console.log(that.tableDate);
      })
    },
    // 请求查询的数据
    myCheck () {
      if (this.input2 == '') {
        this.Click()
      }
    },
    // 点击搜索后，显示要搜索的数据
    Click () {
      const item = JSON.parse(sessionStorage.getItem('user'))
      const that = this
      this.$http({
        method: 'POST',
        url: '/lk/lk/finishSearch',
        data: {
          name: that.input2,
          person: item.username
        }
      }).then(function (response) {
        that.tableDate = response.data.data
        console.log(that.tableDate);
      })
    },
    // 用于查看该行数据
    handleEdit (index, row) {
      this.table = row
      this.dialogFormVisible2 = true
    }
  }
}
    </script>
    
    <style lang="less" scoped>
.top {
  width: 400px;
  float: left;
  .el-input {
    width: 300px;
    margin-bottom: 20px;
  }
  .el-button {
    height: 39px;
  }
}
.Dingdan {
  #add {
    float: right;
  }
}
</style>